<template>
  <div v-permission="'订单管理'" class="bg">
    <div class="fixed" ref="fixeHeight">
      <div class="top-chose-box">
        <div>
          <nut-menu active-color="green">
            <nut-menu-item
              v-model="tabs.groupbuy_id"
              :options="tabs.options1 as any"
              style="widows: 100%"
              @change="handleChangeTabs0"
            />
            <nut-menu-item
              v-model="tabs.time"
              @change="handleChangeTabs1"
              :options="tabs.options2"
            />
          </nut-menu>
        </div>

        <nut-divider style="color: #eeeeee; margin: 0px 0 10px 0 !important" />
        <div class="searchbar-box">
          <nut-searchbar
            class="search-input"
            inputBackground="#fff"
            placeholder="搜索订单手机号"
            @search="handleSearch"
            @clear="handleSearch"
            v-model="listParm.phone"
          >
            <template v-slot:leftin>
              <nut-icon size="14" name="search2"></nut-icon>
            </template>
          </nut-searchbar>
        </div>
      </div>
      <nut-tabs
        title-scroll
        title-gutter="10"
        background="#fff"
        v-model="state.tabvalue"
        @change="changeState"
      >
        <nut-tabpane v-for="item in state.list" :title="item.title">
        </nut-tabpane>
      </nut-tabs>
      <div class="sendgoods flex" v-if="state.tabvalue == 1">
        <div
          v-for="item in sendGoodOptions"
          :class="
            sendsGoodStatus == item.type
              ? 'active sendgoods-item'
              : 'sendgoods-item'
          "
          :key="item.type"
          @click="sendsChoseBtn(item)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="sendgoods flex" v-if="state.tabvalue == 2">
        <div
          v-for="item in getGoodOptions"
          :class="
            getGoodStatus == item.type
              ? 'active sendgoods-item'
              : 'sendgoods-item'
          "
          :key="item.type"
          @click="getChoseBtn(item)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="sendgoods flex" v-if="state.tabvalue == 3">
        <div
          v-for="item in serviceOptions"
          :class="
            serviceStatus == item.type
              ? 'active sendgoods-item'
              : 'sendgoods-item'
          "
          :key="item.type"
          @click="serviceChoseBtn(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="content-wrap-card" :style="{ top: tableHeight + 'px' }">
      <EMPTY v-if="listData.list.length <= 0" />

      <component
        style="height: 100%"
        :is="currentTabComponent"
        :list="listData"
        @loadMore="loadMore"
        :hasMore="hasMore"
        @save="save"
        @open="editBtn"
        @useopen="editUseBtn"
        @markopen="editMarkBtn"
        @openkui="kuiBtn"
        @confirm="confirm"
        @refound="refound"
      ></component>
    </div>

    <div class="block"></div>
    <ADDSELFMODEL ref="addRef" @save="handleSelf" />
    <ADDUSER ref="useRef" @reFresh="handlereFresh" />
    <ADDKUIDI ref="kuidiRef" @saveEms="handleEms" />
    <tip-dialog
      ref="tipDialogRef"
      @confirm="handleConfirm"
      :isAutoClose="false"
    >
      <template #title>
        <div class="dialog-title">修改备注</div>
      </template>

      <template #default>
        <div class="dialog-content">
          <div class="text-line first-line">
            <nut-form :model-value="formData" :rules="rules" ref="ruleForm">
              <nut-form-item prop="organizer_remark">
                <div class="flex">
                  <div style="color: #000000;width:50px">备注:</div>
                  <div style="padding-left: 20px">
                    <input
                      class="nut-input-text"
                      v-model="formData.organizer_remark"
                      placeholder="请输入备注"
                      maxlength="100"
                      type="text"
                    />
                  </div>
                </div>
              </nut-form-item>
            </nut-form>
          </div>
        </div>
      </template>

      <template #cancel>取消</template>
      <!-- <template #beforeConfirm>保存</template> -->
    </tip-dialog>
  </div>
</template>

<script lang="ts" setup name="ordermanage">
import { reactive, toRefs, nextTick, onMounted, ref, computed } from "vue";
import useOrderManage from "@/composable/manage/useOrderMange";
import EMPTY from "@/components/Empty/empty.vue";
import TYPE0 from "./components/all/index.vue";
import ADDSELFMODEL from "./model/addSelfModel.vue";
import ADDUSER from "./model/addUser.vue";
import ADDKUIDI from "./model/addKuiDi.vue";
import TipDialog from "@/components/Dialog/index.vue";
import useRemark from "@/composable/remark/useRemark";

const {
  kuidiRef,
  sendGoodOptions,
  sendsChoseBtn,
  sendsGoodStatus,
  getGoodOptions,
  getGoodStatus,
  getChoseBtn,
  serviceOptions,
  serviceChoseBtn,
  serviceStatus,
  tabs,
  state,
  handleChangeTabs0,
  handleChangeTabs1,
  listParm,
  changeState,
  listData,
  loadMore,
  hasMore,
  handleSearch,
  save,
  tableHeight,
  fixeHeight,
  addRef,
  editBtn,
  useRef,
  hasSave,
  editUseBtn,
  reFresh,
  kuiBtn,
  confirm,
  refound,
} = useOrderManage();
const { tipDialogRef, editMarkBtn, formData, rules, ruleForm, handleConfirm } =
  useRemark(listData);

const currentTabComponent = computed(() => {
  nextTick(() => {
    tableHeight.value = fixeHeight.value.offsetHeight;
  });

  if (
    state.tabvalue == 0 ||
    state.tabvalue == 1 ||
    state.tabvalue == 2 ||
    state.tabvalue == 3
  ) {
    return TYPE0;
  }
});
const handlereFresh = (n: any) => {
  listData.list.map((item: any) => {
    if (item.order_id == n.newdata.order_id) {
      item.rec_name = n.newdata.rec_name;
      item.rec_phone = n.newdata.rec_phone;
      item.rec_address = n.newdata.rec_address;
      item.rec_location = n.newdata.rec_location;
      return;
    }
  });
};
const handleSelf = (n: any) => {
  hasSave(n);
  listData.list.map((item: any) => {
    if (item.order_id == n.newrow.order_id) {
      item.place_name = n.newdata.place_name;
      item.city_province = n.newdata.city_province;
      item.contact_person = n.newdata.contact_person;
      item.contact_phone = n.newdata.phone;
      return;
    }
  });
};
const handleEms = (n: any) => {
  listData.list.map((item: any) => {
    if (item.order_id == n.rowData.order_id) {
      item.express_num = n.formData.express_num;
      item.express_company = n.formData.express_company;

      return;
    }
  });
};
</script>
<style scoped lang="scss">
.bg {
  background: #f7f8f9;
  height: 100vh;
  overflow-y: auto;
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 22;
}
.top-chose-box {
  background: #fff;
  padding: 26px 30px;
  font-size: 32px;
  .top-chose-box-item {
    font-size: 32px;
  }
  .search-input {
    padding: 0 !important;
    border: 4px solid #40ae36;
    border-radius: 50px;
  }
  .nut-icon-search2 {
    color: #40ae36 !important;
    font-weight: bold;
  }
  .searchbar-box {
    padding: 0 10px;
  }
}
:deep(.nut-tabs__titles) {
  padding: 0 !important;
}
:deep(.nut-tabs__titles-item.active .nut-tabs__titles-item__line) {
  background: #40ae36 !important;
  width: 30px;
}
:deep(.nut-tabpane) {
  padding: 0 !important;
}
.content-wrap-card {
  position: absolute;
  margin: 20px 20px 20px 20px;
  border-radius: 20px;
  left: 0;
  right: 0;
  bottom: 10px;
  overflow: hidden;
}
.carditem {
  margin-bottom: 20px;
}
:deep(.nut-menu .nut-menu__bar) {
  box-shadow: none !important;
}
.sendgoods {
  background: #fff;
  padding: 20px 20px;
  // justify-content: space-between;
}
.sendgoods-item {
  color: #444d43;
  font-size: 26px;
  padding: 14px 20px;
  background: #f8f9fa;
  border-radius: 50px;
  margin-right: 20px;
  border: 2px solid transparent;
}
.active {
  border: 2px solid #40ae36;
  color: #40ae36;
  background: #f9fffa;
}
.infiniteUl {
  height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.dialog-title {
  font-size: 36px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #000000;
  line-height: 50px;
  margin: 36px 0 30px 0;
}
.dialog-content {
  box-sizing: border-box;
  padding: 0 50px;
  margin-bottom: 61px;

  .text-line {
    font-size: 30px;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;
    color: #000000;
    line-height: 42px;
    text-align: left;
  }

  .first-line {
  }
  .second-line {
    margin-top: 40px;

    .link {
      color: #40ae36;
    }
  }
}
.box{
	padding:4px 0;
}
</style>
